/**
 * 学习目标：react - 生命周期小结
 * 1. 挂载时
 * constructor 创建前后，用来初始化数据的，不要在这里发请求
 * render  渲染dom
 * componentDidMount 页面渲染完成, 一般可以发请求，定时器，操作dom等
 *
 * 2.更新时: setState 或者 props 改变时会触发
 * 注意：1. reac的更新，指的是数据更新 2. 不要在 render 或者 componentDidUpdate 调用 setState
 * render  渲染dom
 * componentDidUpdate 页面更新完成
 *
 * 3.卸载时：
 * componentWillUnmount 一般移除 定时器
 */
import React from 'react';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { count: 100, isShow: true };
    console.log('App - constructor初始化完成 -----> ');
  }
  componentDidMount() {
    console.log('App - componentDidMount渲染完成 -----> ');
  }
  componentDidUpdate() {
    console.log('App - componentDidUpdate更新完成 -----> ');
  }

  render() {
    console.log('App - render 渲染 -----> ');
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          点我更新count
        </button>
        <button
          onClick={() => {
            this.setState({ isShow: !this.state.isShow });
          }}
        >
          点我切换Child
        </button>
        {this.state.isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    console.log('Child - constructor初始化完成 -----> ');
  }
  componentDidMount() {
    console.log('Child - componentDidMount渲染完成 -----> ');
  }

  componentDidUpdate() {
    console.log('Child - componentDidUpdate更新完成 -----> ');
  }
  componentWillUnmount() {
    console.log('Child - componentWillUnmount卸载 -----> ');
  }
  render() {
    return <div>我是Child组件</div>;
  }
}
